<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{ id ? '修改' : '添加' }}</span>
      </div>

      <!-- 表单 -->
      <el-form size="mini" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title"><el-input class="elinput" v-model="ruleForm.title"></el-input></el-form-item>
        <el-form-item label="公告内容" prop="content">
          <WangEditor :content="this.ruleForm.content" @handeleHtml="handeleHtml"></WangEditor>
        </el-form-item>

        <el-form-item label="公告照片" prop="picture">
          <Upload :thumb="this.ruleForm.picture" @handleAvatarSuccess="handleAvatarSuccess"></Upload>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="ruleForm.state">
            <el-radio :label="1">显示</el-radio>
            <el-radio :label="2">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in newstypeData" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import WangEditor from '@/components/WangEditor.vue'
import moment from 'moment'
import Upload from '@/components/Upload.vue'
import { newstypelist, add, getdetail } from '../api/news'

export default {
  name: 'NewsAdd',
  components: { WangEditor, Upload },
  data() {
    return {
      id: null,

      newstypeData: null,
      resource: '',
      ruleForm: {
        state: 1,
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
      },
    }
  },
  created() {
    this.id = this.$route.params.id

    if (this.id) {
      this.getdetail()
    }

    this.newstypelist()
  },
  methods: {
    async getdetail() {
      let res = await getdetail({ id: this.id })
      console.log(res)

      this.ruleForm = JSON.parse(JSON.stringify(res.data))
      
      // 确保content字段正确赋值
      if (!this.ruleForm.content) {
        this.ruleForm.content = ""
      }

      console.log('表单', this.ruleForm)
    },

    async newstypelist() {
      let query = {
        page: 1,
        psize: 1000,
      }

      let {
        data: { list },
      } = await newstypelist(query)
      this.newstypeData = list
      console.log(list)
    },

    handeleHtml(html) {
      this.ruleForm.content = html
    },

    handleAvatarSuccess(imageInfo) {
      this.ruleForm.picture = imageInfo.data
    },

    // 表单
    submitForm(formName) {
      // console.log('ruleform', this.ruleForm);

      this.ruleForm.edituser = localStorage.getItem('username')
      this.ruleForm.hits = 0
      this.ruleForm.addtime = moment().format('YYYY-MM-DD HH:mm:ss')

      if (!this.ruleForm.content) return this.$message.error('请输入正文')
      if (!this.ruleForm.picture) return this.$message.error('请输入上传图片')

      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          await add(this.ruleForm)
          this.$message.success('添加成功')

          this.ruleForm = {
            state: 1,
          }
          this.$refs[formName].resetFields()
          this.$router.push('/news')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$router.push('/news')
    }
  },
}
</script>
<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.box-card {
  margin: auto;
  width: 90%;
}

.elinput {
  width: 20%;
}
</style>
